<template>
  <common-echart :pos="pos" :option="option" @getMychart="getMychart" width="320" height="140"></common-echart>
</template>

<script setup>
  import { reactive, computed, ref, onMounted, nextTick } from 'vue'
  import commonEchart from '@/components/commonEchart.vue'
  const { pos } = defineProps({
    pos: {
      type: String,
      required: true
    }
  })
  let myChart = ref({})
  let data = reactive({
    dataTemp1: [6, 7, 9, 5, 5],
		dataTemp2: ['02-11', '02-12', '02-13', '02-14', '02-15'],
		myColor: ["rgba(65, 199, 255, 1)","rgba(65, 199, 255, 0)","rgba(132, 142, 142, 1)"]
  })
      // 1.1 从接口获取数据
  const getData = async() => {
    const {data: data0} = await getPopulationTotal()
    // console.log(data0);
    if(data0.code != 200){
      return 
    }

    // 1.1.1 获取真实数据data0以后，把data0数据push到data中
    data.dataList1 = []
    data0.data.age.forEach((item, index) => {
      data.dataList1.push(item)
    })
    // 1.1.2 进一步加工
    dealData(data)
  }
  // 1.2 二次加工并更新图表
  const dealData = (data) => {
    
    // 更新图表数据
    fresh(data)
  }
  
  // 2. 定义图表编辑项 option
  let option = reactive({})
  const getOption = (data) =>{
    return {
      // backgroundColor:'rgba(13,29,70,0.75)',
      title:{
        text:'单位：人',
        textStyle:{
          fontSize: 15,
          color: '#80878a'
        },
        left:'5%',
        top:'0%'
      },
      tooltip: {
        show:true
      },
      grid: {
        // top: '10%',
        bottom:'15%',
        // y: '10%',
        // x2: '4%',
        // y2: '8%',
        width:'85%',
        height:'68%',
        borderWidth: 1
      },
      xAxis: [{
        type: 'category',
        data: data.dataTemp2,
        splitLine: {
          show: false,
        },
        axisLabel: {
          show:true,
          // textStyle: {
          //   color: '#80878a',
          //   fontSize: 15
          // },
          color: '#80878a',
          fontSize: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#80878a',
            width: 2
          }
        },
        axisTick: {
          show: false,
        }
      }],
      yAxis: [{
        type: 'value',
        // min: 0,
        // max: 100,
        // interval: 25,
        splitLine: {
          show: true,
          lineStyle: {
            type: "bashed",
            color: '#556468'
          }
        },
        axisLabel: {
          show:true,
          color: '#80878a',
          fontSize: 15,
          // formatter: '{value}%',
          // margin: 5,
        },
        axisLine: {
          show:true,
          lineStyle: {
            color: 'grey',
            width: 2
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [{  
        name:'数量',
        barWidth: 10,
        type: 'bar',
        data: data.dataTemp1,
        itemStyle: {
          // normal: {
            
          // },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: data.myColor[0]
            }, {
              offset: 1,
              color: data.myColor[1]
            }]
          },
          borderRadius: [10, 10, 0, 0],
        },
      }]
    }
  }


  // 3. 得到mychart实例并暴露出去，处理进一步交互
  let getMychart = ([myChart_0, id]) => {
    myChart.value = myChart_0
    // console.log('ok')
  }
  // setOption 这里不需要修改
  let fresh = (data) => {
    nextTick(() => {
      // 处理好data后，拿去生成option
      option = getOption(data)
      myChart.value.setOption(option)
    })
  }

  onMounted(()=> {
    // 1. 若接入了数据，运行
    // getData()

    // 2. 若没有接入数据，运行
    dealData(data)
  })
</script>

<style lang="scss" scoped></style>